<!--
 * @Author: linZeJian
 * @Date: 2022-01-24 10:34:40
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-06-16 14:55:15
 * @Description: 
-->
<template>
  <div class="w100 h100">
    <div>
      <el-tiptap v-model="content" :extensions="extensions" />
    </div>
  </div>
</template>
<script>
import {
  // necessary extensions
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  FontSize
} from 'element-tiptap';
export default {
  name: "",
  data() {
    return {
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }),
        new Bold({ bubble: true }), // render command-button in bubble menu.
        new Underline({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.
        new Italic(),
        new Strike(),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
        new FontSize({
          fontSizes: ['12', '14', '16', '18', '20', '22', '24', '26', '28', '30']
        }),
      ],
      // editor's content
      content: `
        <h1>Heading</h1>
        <p>This Editor is awesome!</p>
      `,
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
